<template>
    <div class="village">
         <!-- 导航栏开始 -->
        <div class="banner">
            <!-- 版心开始 -->
            <div class="container">
                <ul class="channelList">
                    <router-link to="/Home" tag="li">首页</router-link>
                    <router-link tag="li" to="/secondHand">二手房</router-link>
                    <router-link tag="li" to="/AnewHouse">新房</router-link>
                    <router-link to="/rental" tag="li">租房</router-link>
                    <router-link tag="li" to="/Office">写字楼</router-link>
                    <li class="selected">小区</li>
                    <li>问答</li>
                    <li>工具</li>
                    <router-link to="/release" tag="li">发布房源</router-link>
                </ul>
                <!-- 导航栏右边 -->
                <div class="bannerRight">
                    <div class="login">
                        <i></i>
                        <span v-if="!userInfo">登录</span>
                        <span v-if="!userInfo">/</span>
                        <span v-if="!userInfo">注册</span>
                        <span v-if="userInfo">{{userInfo}}</span>
                        <span v-if="userInfo">退出</span>
                    </div>
                    <div class="phone">
                        <i></i>
                        <span>热线电话1010-9000</span>
                    </div>
                    
                </div>
            </div>
            <!-- 版心结束 -->
        </div>
        <!-- 导航栏结束 -->
        <!-- 头部开始 -->
        <div class="village-header">
            <div class="container">
                <!-- 菜单栏 -->
                <div class="meau">
                    <div class="meauLeft">
                        <div class="logo"></div>
                        <ul class="typeList">
                            <router-link tag="li" to="/secondHand">在售</router-link>
                            <li>成交</li>
                            <li class="selected">小区</li>
                            <li>地图找房</li>
                        </ul>
                    </div>
                    <div class="meauRight">
                        <i></i>
                        <span>欢迎来到遇家</span>
                    </div>
                </div>
                <!-- 搜索栏 -->
                <div class="searcher">
                    <div class="input">
                        <input type="text" placeholder="请输入小区名开始查找小区">
                        <div class="icon-seacher">
                            <i></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部结束 -->
        <!-- 分类开始 -->
        <div class="village-filter">
            <!-- 地理位置 -->
            <div class="position">
                <div class="position-title">
                    <h4 class="title-left">位置</h4>
                    <div class="areaTab selected">
                        <span>区域</span>
                        <i></i>
                    </div>
                    <div class="areaTab">
                        <span>地铁线</span>
                        <i></i>
                    </div>
                </div>
                <div class="position-content">
                    <div class="position-text-ershoufang">
                        <ul>
                           <li>天河</li>
                           <li>越秀</li>
                           <li>荔湾</li>
                           <li>海珠</li>
                           <li>番禺</li>
                           <li>白云</li>
                           <li>黄埔</li>
                           <li>从化</li>
                           <li>增城</li>
                           <li>花都</li>
                           <li>南沙</li>
                           <li>南海</li>
                           <li>顺德</li>
                        </ul>
                    </div>
                    <div class="position-text-subway" style="display:none">
                        <ul>
                            <li>1号线</li>
                            <li>2号线</li>
                            <li>3号线</li>
                            <li>3号线北延段</li>
                            <li>4号线</li>
                            <li>5号线</li>
                            <li>6号线</li>
                            <li>7号线</li>
                            <li>8号线</li>
                            <li>9号线</li>
                            <li>13号线</li>
                            <li>14号线</li>
                            <li>14号线支线(知识城线)</li>
                            <li>18号线</li>
                            <li>21号线</li>
                            <li>22号线</li>
                            <li>广佛线</li>
                            <li>APM线</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 房子配置选项 -->
            <div class="list-more">
                <!-- 均价 -->
                <div class="list-item">
                    <h4>均价</h4>
                    <div>
                        <input type="checkbox">
                        <span>1万以下</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>1-1.5万</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>1.5-2万</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>2-2.5万</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>2.5-3万</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>3万以上</span>
                    </div>
    
                </div>
                <!-- 楼龄 -->
                <div class="list-item">
                    <h4>楼龄</h4>
                    <div>
                        <input type="checkbox">
                        <span>5年以内</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>10年以内</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>15年以内</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>20年以内</span>
                    </div>
                    <div>
                        <input type="checkbox">
                        <span>20年以上</span>
                    </div>
                </div>
            </div>
            
        </div>
        <!-- 分类结束 -->
        <!-- 小区内容 -->
        <div class="village-content">
            <div class="container">
                <!-- 左边的内容 -->
                <div class="left-content">
                    <!-- 二手房排序选项 -->
                    <div class="orderFilter">
                        <ul>
                            <li class="selected">默认排序</li>
                            <li>小区单价</li>
                        </ul>
                    </div>
                    <!-- 排序结果头部 -->
                    <div class="resultDes">
                        <h1>共找到<span>30</span>套广州小区</h1>
                        <div class="button">
                            <div class="clearBtn">
                                <i></i>
                                <span>清空条件</span>
                            </div>
                            <div class="saveBtn">
                                <i></i>
                                <span>保存搜索</span>
                            </div>
                        </div>
                    </div>
                    <!-- 二手房详情内容 -->
                    <div class="sellListContent">
                        <ul class="sellitems">
                            <li>
                                <div class="image">
                                    <img src="../assets/image/pc1.jpg" alt="">
                                    <img class="small" src="https://s1.ljcdn.com/feroot/pc/asset/img/vr/vrgold.png?_v=20221025170057086" alt="">
                                </div>
                                <div class="info">
                                    <div class="title">
                                       <div class="titleLeft">
                                            <h1>今日丽舍</h1>
                                            <span>必看小区</span>
                                       </div>
                                    </div>
                                    <div class="address">
                                        <div class="houseInfo">
                                            <i></i>
                                            <span>90天成交0套</span>
                                            <span>|</span>
                                            <span>26套正在出租</span>
                                        </div>
                                    </div>
                                    <div class="followInfo">
                                        <i></i>
                                        <span>番禺  大石 / 1996年建成</span>
                                    </div>

                                    <div class="agentInfo">
                                        <i></i>
                                        <span>张里</span>
                                        <div>
                                            <i></i>
                                            <span>免费咨询</span>
                                        </div>
                                    </div>

                                    <div class="tag">
                                        <span class="subway">近地铁</span>
                                        <span class="vr">VR房源</span>
                                        <span class="texfree">房本满五年</span>
                                        <span class="haskey">随时看房</span>
                                    </div>
                                    <!-- 价格 -->
                                    <div class="priceInfo">
                                        <!-- 总价 -->
                                        <div class="totalPrice">
                                            <span>27901</span>
                                            <i>元/m²</i>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="unitPrice">
                                            <span>10月二手房参考均价</span>
                                        </div>
                                    </div>
                                    <!-- 销售 -->
                                    <div class="ItemSellCount">
                                        <div class="count">
                                            <span>88</span>
                                            <i>套</i>
                                        </div>
                                        <div class="countTitle">在售二手房</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="image">
                                    <img src="../assets/image/pc1.jpg" alt="">
                                    <img class="small" src="https://s1.ljcdn.com/feroot/pc/asset/img/vr/vrgold.png?_v=20221025170057086" alt="">
                                </div>
                                <div class="info">
                                    <div class="title">
                                       <div class="titleLeft">
                                            <h1>今日丽舍</h1>
                                            <span>必看小区</span>
                                       </div>
                                    </div>
                                    <div class="address">
                                        <div class="houseInfo">
                                            <i></i>
                                            <span>90天成交0套</span>
                                            <span>|</span>
                                            <span>26套正在出租</span>
                                        </div>
                                    </div>
                                    <div class="followInfo">
                                        <i></i>
                                        <span>番禺  大石 / 1996年建成</span>
                                    </div>

                                    <div class="agentInfo">
                                        <i></i>
                                        <span>张里</span>
                                        <div>
                                            <i></i>
                                            <span>免费咨询</span>
                                        </div>
                                    </div>

                                    <div class="tag">
                                        <span class="subway">近地铁</span>
                                        <span class="vr">VR房源</span>
                                        <span class="texfree">房本满五年</span>
                                        <span class="haskey">随时看房</span>
                                    </div>
                                    <!-- 价格 -->
                                    <div class="priceInfo">
                                        <!-- 总价 -->
                                        <div class="totalPrice">
                                            <span>27901</span>
                                            <i>元/m²</i>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="unitPrice">
                                            <span>10月二手房参考均价</span>
                                        </div>
                                    </div>
                                    <!-- 销售 -->
                                    <div class="ItemSellCount">
                                        <div class="count">
                                            <span>88</span>
                                            <i>套</i>
                                        </div>
                                        <div class="countTitle">在售二手房</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 猜你喜欢开始 -->
                    <div class="recommendList">
                        <h1>猜你喜欢</h1>
                        <ul>
                            <li>
                                <div class="image">
                                    <img src="../assets/image/pc1.jpg" alt="">
                                    <img class="small" src="https://s1.ljcdn.com/feroot/pc/asset/img/vr/vrgold.png?_v=20221025170057086" alt="">
                                </div>
                                <div class="info">
                                    <div class="title">
                                       <div class="titleLeft">
                                            <h1>新市 佳地新都 楼梯中层单间 采光好</h1>
                                            <span>必看好房</span>
                                       </div>
                                       <div class="listButtonContainer">
                                            <div class="compareBtn">
                                                <span>加入对比</span>
                                                <span style="display:none">已加入对比</span>
                                            </div>
                                            <div class="btn-follow">
                                                <span>关注</span>
                                                <span style="display:none">取消关注</span>
                                            </div>
                                       </div>
                                    </div>
                                    <div class="address">
                                        <div class="houseInfo">
                                            <i></i>
                                            <span>佳地新都 / 1室0厅 / 42 / 南 /简装</span>
                                        </div>
                                    </div>
                                    <div class="floor">
                                        <i></i>
                                        <span>中楼层(共9层)1994年建塔楼</span>
                                        <span>-</span>
                                        <span>新市</span>
                                    </div>
                                    <div class="followInfo">
                                        <i></i>
                                        <span>2人关注</span>
                                    </div>
                                    <div class="tag">
                                        <span class="subway">近地铁</span>
                                        <span class="vr">VR房源</span>
                                        <span class="texfree">房本满五年</span>
                                        <span class="haskey">随时看房</span>
                                    </div>
                                    <!-- 价格 -->
                                    <div class="priceInfo">
                                        <!-- 总价 -->
                                        <div class="totalPrice">
                                            <span>85</span>
                                            <i>万</i>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="unitPrice">
                                            <span>20,171元/平</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                             
                        </ul>
                    </div>
                    <!-- 猜你喜欢结束 -->
                    <!-- 底部 -->
                    <div class="contentBottom">
                        <span>广州房产网</span>
                        <span>&nbsp;>&nbsp;</span>
                        <span>广州小区</span>
                    </div>
                </div>
                <!-- 右边的内容 -->
                <div class="right-content">
                    <div class="map">
                        <div class="pic"></div>
                        <div class="text">
                            <span>试试地图找房</span>
                        </div>
                    </div>
                    <div class="hotQA">
                        <h1>热门问答</h1>
                        <ul>
                            <li>
                                <div class="question">在北京的在读大学生能买北京的房子吗？</div>
                                <span>3个回答 /</span>
                                <span>2018-04-08</span>
                            </li>
                            <li>
                                <div class="question">在北京的在读大学生能买北京的房子吗？</div>
                                <span>3个回答 /</span>
                                <span>2018-04-08</span>
                            </li>
                            <li>
                                <div class="question">在北京的在读大学生能买北京的房子吗？</div>
                                <span>3个回答 /</span>
                                <span>2018-04-08</span>
                            </li>
                            <li>
                                <div class="question">在北京的在读大学生能买北京的房子吗？</div>
                                <span>3个回答 /</span>
                                <span>2018-04-08</span>
                            </li>
                            <li>
                                <div class="question">在北京的在读大学生能买北京的房子吗？</div>
                                <span>3个回答 /</span>
                                <span>2018-04-08</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--小区内容结束 -->
        <!-- 新房推荐开始 -->
        <div class="newHousePush">
            <div class="container">
                <h3>推荐楼盘</h3>
                <ul>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                    <li>
                        <div class="image">
                            <img src="../assets/image/new1.jpg" alt="">
                            <div class="description">海珠－世茂珠江天鹅湾</div>
                        </div>
                        <div class="price">
                            <i>130000</i>
                            元/平
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 新房推荐结束 -->
    </div>
</template>

<script>
    export default {
        name:"villageView",
        data() {
            return {
                userInfo:""
            }
        },
        created(){
             // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
        }
    }
</script>

<style lang="scss" scoped>
.village{
    .banner{
        width: 100%;
        height: 36px;
        background-color: #394043;
        .container{
            display: flex;
            justify-content: space-between;
             .channelList{
                display: flex;
                align-items: center;
                height: 36px;
                width: 460px;
                li{
                    font-size: 12px;
                    color: #a9abab;
                    margin-right: 21.5px;
                    cursor: pointer;
                    &:hover{
                        color: #fff;
                    }
                    &.selected{
                        color: #fff;
                    }
                }
            }
            .bannerRight{
                display: flex;
                align-items: center;
                .phone{
                    display: flex;
                    align-items: center;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -495px -220px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                    }
                }
                .login{
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    cursor: pointer;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -554px -173px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                        margin-right: 5px;
                    }
                }
            }
        }
       
    }

    .village-header{
        height: 98px;
        padding: 30px 0 26px 0;
        background: #f5f5f6;
        .meau{
            display: flex;
            justify-content: space-between;
            height: 28px;
            .meauLeft{
                height: 28px;
                width: 997px;
                display: flex;
                align-items: center;
                .logo{
                    width: 103px;
                    height: 36px;
                    // background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -120px -284px;
                    background: url("../assets/image/logo1.png") no-repeat 0 center /cover;
                    // background-size: 100% 100%;
                    vertical-align: middle;
                    margin-top:-6px;
                }
                .typeList{
                    display: flex;
                    margin-left:34px;
                    align-items: center;
                    height: 28px;
                    li{
                        font-size: 16px;
                        line-height: 26px;
                        color: #333;
                        margin-right: 30px;
                        cursor: pointer;
                        &.selected{
                            color: #00ae66;
                        }
                    }
                }
            }
            .meauRight{
                display: flex;
                align-items: center;
                height: 28px;
                i{
                    width: 14px;
                    height: 18px;
                    margin-right: 10px;
                    background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -399px -220px;

                }
                span{
                    font-size: 16px;
                    color: #333;
                }
            }
        }
        .searcher{
            margin-top: 25px;
            .input{
                height: 45px;
                width: 710px;
                position: relative;
                input{
                    border: none;
                    outline: none;
                    padding: 0 22px;
                    box-sizing: border-box;
                    height: 45px;
                    width: 710px;
                     /* 阴影 */
                    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
                }
                .icon-seacher{
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50px;
                    height: 45px;
                    
                    i{
                        width: 17px;
                        height: 17px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -589px -96px;

                    }
                }
            }
        }
    }

    .village-filter{
        background-color: #fbfbfb;
        border-bottom: 1px solid #efefef;
        margin: 26px auto 0;
        width: 1150px;
        padding: 14px 25px;
        box-sizing: border-box;

        .position-title{
            height: 27px;
            display: flex;
            align-items: center;
            .title-left{
                line-height: 27px;
                width: 49.5px;
                font-size: 12px;
                font-weight: 700;
                color: #333;
            }
            .areaTab{
                line-height: 27px;
                font-size: 12px;
                margin-right: 30px;
                color: #394043;
                display: flex;
                align-items: center;
                
                &.selected{
                    color: #00ae66;
                    i{
                        background-position: -474px -164px;
                    }
                }
                i{
                    margin-left: 9px;
                    background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684) no-repeat;
                    background-position: -484px -164px;
                    width: 10px;
                    height: 5px;
                }
            }

        }

        .position-content{
            height: 27px;
            width: 100%;
            border-top:1px solid #f1f1f1 ;
            border-bottom: 1px solid #f1f1f1;
            padding: 5px 0;
            margin: 18px 0;
            .position-text-ershoufang,.position-text-subway{
                margin-left: 49.5px;
                height: 27px;
                ul{
                    display: flex;
                    height: 27px;
                    align-items: center;
                    li{
                        font-size: 12px;
                        line-height: 27px;
                        color: #394043;
                        margin-right: 17px;
                    }
                }

            }
        }

        .list-more{
            .list-item{
                width: 100%;
                height: 27px;
                display: flex;
                h4{
                    width: 49.5px;
                    height: 27px;
                    line-height: 27px;
                    font-size: 12px;
                    font-weight: 700;
                    color: #333;
                }
                div{
                    height: 27px;
                    display: flex;
                    align-items: center;
                    width: 160px;
                    input{
                        width: 12px;
                        height: 12px;
                        margin: 0;
                        margin-right: 8px;
                        //  /* 阴影 */
                        // box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
                        outline: #333;
                    }
                    span{
                        color: #394043;
                        font-size: 12px;
                        line-height: 27px;
                    }
                }
            }
        }
        .more-btn{
            padding: 10px 0 ;
            box-sizing: border-box;
            height: 32px;
            width: 200px;
            margin: 0 auto;
            text-align: center;
            justify-content: center;
            display: flex;
            align-items: center;
            span{
                font-size: 12px;
                color: #a7a8a9;
                line-height: 12px;
            }
            .arrow{
                background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -494px -164px;
                width: 8px;
                height: 4px;
                margin-left: 7px;
            }
            .upArrow{
                background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -594px -160px;
                width: 8px;
                height: 4px;
                margin-left: 7px;
            }
        }
    }
    .village-content{
        width: 100%;
        margin-top: 26px;
        display: flex;
        .container{
            display: flex;
            justify-content: space-between;
            .left-content{
                width: 910px;
                .orderFilter{
                border-bottom: 2px solid #00ae66;
                ul{
                    display: flex;
                    justify-content: flex-start;
                    height: 47.5px;
                    width: 90%;
                    li{
                        width: 110px;
                        height: 47.5px;
                        text-align: center;
                        line-height: 47.5px;
                        font-size: 15px;
                        color: #394043;

                        &.selected{
                            color: #fff;
                            background: #00ae66;
                        }
                    }
                }
                }
                // 搜索结果
                .resultDes{
                    height: 56px;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #efefef;
                    // 左边的总数 标题
                    h1{
                    height: 56px;
                    line-height: 56px;
                    font-size: 22px;
                    font-weight: bold;
                    span{
                        color: #00ae66;
                        font-family: 'tahoma';
                        margin: 0 5px;
                    }
                    }
                    .button{
                        display: flex;
                        align-items: center;
                        height: 56px;
                    .clearBtn{
                        display: flex;
                        align-items: center;
                        height: 56px;
                        i{
                            background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -424px -173px;
                            width: 15px;
                            height: 12px;
                            margin-right: 7px;
                        }
                        span{
                            color: #394043;
                            font-size: 12px;

                        }

                    }
                    .saveBtn{
                        display: flex;
                        align-items: center;
                        height: 56px;
                        i{
                            background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -568px -185px;
                            width: 14px;
                            height: 13px;
                            margin-left: 18px;
                            margin-right: 7px;
                        }
                        span{
                            color: #394043;
                            font-size: 12px;

                        }
                    }
                    }
                }
                // 二手房内容
                .sellListContent{
                    width: 100%;
                    .sellitems{
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                        li{
                            padding: 35px 0;
                            border-bottom: 1px solid #f1f1f1;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            position: relative;
                            
                           

                            .image{
                            width: 232px;
                            height: 174px;
                            position: relative;
                            img{
                                width: 232px;
                            }
                            .small{
                                position: absolute;
                                z-index: 10;
                                bottom: 8px;
                                left: 8px;
                                width: 45px;
                                height: 45px;
                            }
                            }
                            .info{
                                width: 640px;
                                height: 174px;
                                display: flex;
                                flex-direction: column;
                                position: relative;

                                &:hover>.title>.listButtonContainer{
                                   display: flex;
                                }
                                .title{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 640px;
                                height: 22px;
                                cursor: pointer;
                                .titleLeft{
                                    display: flex;
                                    align-items: center;
                                    h1{
                                        max-width: 420px;
                                        text-decoration: none;
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: #394043;
                                        // 单行文本溢出隐藏
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;

                                        &:hover{
                                            color: #00ae66;
                                        }
                                    }
                                    span{
                                        font-size: 12px;
                                        line-height: 21px;
                                        margin-left:5px ;
                                        text-align: center;
                                        padding: 0 5px;
                                        color: #fff;
                                        height: 21px;
                                        font-weight: 550;
                                        background-color: #D53C3C;
                                        vertical-align: top;
                                    }
                                }
                                .listButtonContainer{
                                    display: flex;
                                    display: none;
                                    .compareBtn{
                                        line-height: 24.5px;
                                        padding: 0 7.5px;
                                        border: 1px solid #dddddd;
                                        border-radius: 2px;
                                        color: #a9abab;
                                        font-size: 12px;
                                        cursor: pointer;
                                        &:hover{
                                            border-color: #ccc;
                                            color: #394043;
                                        }
                                    }
                                    .btn-follow{
                                        line-height: 24.5px;
                                        padding: 0 7.5px;
                                        border: 1px solid #dddddd;
                                        border-radius: 2px;
                                        color: #a9abab;
                                        font-size: 12px;
                                        cursor: pointer;
                                        margin-left: 12px;

                                        &:hover{
                                            border-color: #ccc;
                                            color: #394043;
                                        }
                                    }
                                }
                                
                                }
                                .agentInfo{
                                margin-top: 14px;
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                i{
                                    background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -413px -221px;
                                    width: 13px;
                                    height: 15px;
                                    margin-right: 12px;

                                }
                                span{
                                    margin-right: 22px;
                                    display: inline-block;
                                    height: 24px;
                                    // vertical-align: top;
                                    color: #666666;
                                    font-size: 14px;
                                    line-height: 24px;
                                   
                                }
                                div{
                                    cursor: pointer;
                                    width: 76px;
                                    height: 22px;
                                    font-size: 12px;
                                    display: inline-block;
                                    border: 1px solid #00AE66;
                                    color: #00AE66;
                                    border-radius: 2px;
                                    display: flex;
                                    align-items: center;

                                    i{
                                        display: inline-block;
                                        background-image: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684);
                                        background-position: -474px -185px;
                                        width: 18px;
                                        height: 18px;
                                        transform: scale(.75);
                                        margin-right: 1px;
                                        margin-left: 3px;
                                        margin-bottom: 3px;
                                        position: relative;
                                        top: 1px;
                                    }

                                    span{
                                        margin: 0;
                                        display: inline-block;
                                        height: 22px;
                                        line-height: 22px;
                                        font-size: 12px;
                                        color: #00AE66;
                                    }
                                }
                                }
                                .address{
                                margin-top: 20px;
                                .houseInfo{
                                    width: 510px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    vertical-align: top;
                                    display: flex;
                                    align-items: center;
                                    i{
                                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -441px -220px;
                                        width: 14px;
                                        height: 14px;
                                        margin-right: 12px;

                                    }
                                    span{
                                        white-space: pre-wrap;
                                        color: #616669;
                                        font-size: 14px;
                                        margin-right: 5px;
                                    }
                                }
                                }
                                .followInfo{
                                margin-top: 18px;
                                display: flex;
                                align-items: center;
                                i{
                                    background: url("https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684") no-repeat -552px -130px;
                                    width: 15px;
                                    height: 14px;
                                    margin-right: 12px;
                                }
                                span{
                                    font-size: 14px;
                                    white-space: pre-wrap;
                                    color: #616669;
                                }
                                }
                                .tag{
                                margin-top: 18px;
                                display: flex;
                                span{
                                    font-size: 12px;
                                    line-height: 30px;
                                    padding: 0 11px;
                                    margin-right: 6px;
                                    text-align: center;
                                }
                                .subway{
                                    color: #849aae;
                                    background-color: #f4f7f9;
                                }
                                .vr{
                                    background: #E8EEFD;
                                    color: #638FF9;
                                }
                                .texfree{
                                    background: #ffece8;
                                    color: #FF8062;
                                }
                                .haskey{
                                    background: #e1f5ed;
                                    color: #33BE85;
                                }
                                }
                                .priceInfo{
                                position: absolute;
                                top: 30%;
                                right: 90px;
                                width: 130px;
                                height: 56px;
                                display: flex;
                                flex-direction: column;
                                .totalPrice{
                                    display: flex;
                                    align-items: flex-end;
                                    justify-content: flex-end;
                                    span{
                                        font-weight: bold;
                                        font-size: 26px;
                                        font-family: 'tahoma';
                                        margin-right: 3px;
                                        color: #db4c3f;
                                    }
                                    i{
                                        font-size: 14px;
                                        color: #db4c3f;
                                        margin-right: 3px;
                                        margin-bottom: 2px;
                                        font-weight: 400;
                                    }
                                }
                                .unitPrice{
                                    margin-top: 18px;
                                    text-align: right;
                                    span{
                                        font-size: 12px;
                                        color: #a9abab;
                                    }
                                }
                                }

                                .ItemSellCount{
                                    position: absolute;
                                    top: 30%;
                                    right: 0px;
                                    width: 90px;
                                    height: 56px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: flex-end;
                                    .count{
                                        display: flex;
                                        align-items: flex-end;
                                        align-items: center;
                                        span{
                                            font-size: 26px;
                                            font-family: 'tahoma';
                                            margin-right: 5px;
                                            color: #394043;
                                            font-weight: bold;
                                        }
                                        i{
                                            display: block;
                                            font-size: 16px;
                                            color: #394043;
                                            font-weight: bold;
                                        }
                                    }

                                    .countTitle{
                                        margin-top: 18px;
                                        text-align: right;
                                        line-height:16px ;
                                        font-size: 12px;
                                        color: #a9abab;
                                    }
                                }
                            }
                        }
                    }
                }
                // 推荐
                .recommendList{
                    margin-top: 50px;
                    width: 100%;
                    h1{
                        font-size: 20px;
                        font-weight: bold;
                        color: #394043;
                    }
                    ul{
                        display: flex;
                        width: 100%;
                        flex-direction: column;
                        li{
                            padding: 35px 0;
                            border-bottom: 1px solid #f1f1f1;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            position: relative;
                            .image{
                                width: 232px;
                                height: 174px;
                                position: relative;
                            img{
                                width: 232px;
                            }
                            .small{
                                position: absolute;
                                z-index: 10;
                                bottom: 8px;
                                left: 8px;
                                width: 45px;
                                height: 45px;
                            }
                            }
                            .info{
                                width: 640px;
                                height: 174px;
                                display: flex;
                                flex-direction: column;
                                position: relative;
                                &:hover>.title>.listButtonContainer{
                                   display: flex;
                                }
                                .title{
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    width: 640px;
                                    height: 22px;
                                    cursor: pointer;
                                .titleLeft{
                                    display: flex;
                                    align-items: center;
                                    h1{
                                        max-width: 420px;
                                        text-decoration: none;
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: #394043;
                                        // 单行文本溢出隐藏
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;

                                        &:hover{
                                            color: #00ae66;
                                        }
                                    }
                                    span{
                                        font-size: 12px;
                                        line-height: 21px;
                                        margin-left:5px ;
                                        text-align: center;
                                        padding: 0 5px;
                                        color: #fff;
                                        height: 21px;
                                        font-weight: 550;
                                        background-color: #D53C3C;
                                        vertical-align: top;
                                    }
                                }
                                .listButtonContainer{
                                    display: none;

                                    .compareBtn{
                                        line-height: 24.5px;
                                        padding: 0 7.5px;
                                        border: 1px solid #dddddd;
                                        border-radius: 2px;
                                        color: #a9abab;
                                        font-size: 12px;
                                        cursor: pointer;
                                        &:hover{
                                            border-color: #ccc;
                                            color: #394043;
                                        }
                                    }
                                    .btn-follow{
                                        line-height: 24.5px;
                                        padding: 0 7.5px;
                                        border: 1px solid #dddddd;
                                        border-radius: 2px;
                                        color: #a9abab;
                                        font-size: 12px;
                                        cursor: pointer;
                                        margin-left: 12px;

                                        &:hover{
                                            border-color: #ccc;
                                            color: #394043;
                                        }
                                    }
                                }
                                
                                }
                                .floor{
                                    margin-top: 18px;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                i{
                                    background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -398px -238px;
                                    width: 13px;
                                    height: 15px;
                                    margin-right: 12px;

                                }
                                span{
                                    font-size: 14px;
                                    white-space: nowrap;
                                    color: #616669;
                                    &:nth-child(3){
                                        margin:0 5px;
                                    }
                                }
                                }
                                .address{
                                    margin-top: 20px;
                                .houseInfo{
                                    width: 510px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    vertical-align: top;
                                    display: flex;
                                    align-items: center;
                                    i{
                                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -441px -220px;
                                        width: 14px;
                                        height: 14px;
                                        margin-right: 12px;

                                    }
                                    span{
                                        white-space: pre-wrap;
                                        color: #394043;
                                        font-size: 14px;
                                    }
                                }
                                }
                                .followInfo{
                                    margin-top: 18px;
                                    display: flex;
                                    align-items: center;
                                    i{
                                        background: url("https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684") no-repeat -552px -130px;
                                        width: 15px;
                                        height: 14px;
                                        margin-right: 12px;
                                    }
                                    span{
                                        font-size: 14px;
                                        white-space: pre-wrap;
                                        color: #616669;
                                    }
                                    }
                                    .tag{
                                        margin-top: 18px;
                                        display: flex;
                                    span{
                                        font-size: 12px;
                                        line-height: 30px;
                                        padding: 0 11px;
                                        margin-right: 6px;
                                        text-align: center;
                                    }
                                    .subway{
                                        color: #849aae;
                                        background-color: #f4f7f9;
                                    }
                                    .vr{
                                        background: #E8EEFD;
                                        color: #638FF9;
                                    }
                                    .texfree{
                                        background: #ffece8;
                                        color: #FF8062;
                                    }
                                    .haskey{
                                        background: #e1f5ed;
                                        color: #33BE85;
                                    }
                                    }
                                    .priceInfo{
                                        position: absolute;
                                        top: 30%;
                                        right: 0;
                                        width: 130px;
                                        height: 56px;
                                        display: flex;
                                        flex-direction: column;
                                    .totalPrice{
                                        display: flex;
                                        align-items: flex-end;
                                        justify-content: flex-end;
                                        span{
                                            font-weight: bold;
                                            font-size: 26px;
                                            font-family: 'tahoma';
                                            margin-right: 3px;
                                            color: #db4c3f;
                                        }
                                        i{
                                            font-size: 14px;
                                            color: #db4c3f;
                                            margin-right: 3px;
                                            margin-bottom: 2px;
                                            font-weight: 400;
                                        }
                                    }
                                    .unitPrice{
                                        margin-top: 18px;
                                        text-align: right;
                                        span{
                                            font-size: 12px;
                                            color: #394043;
                                        }
                                    }
                                    }
                            }   
                    }
                    }                    
                }
                // 底部
                .contentBottom{
                    padding: 30px 0;
                    font-size: 12px;
                    color: #aaa;
                }
            }
            .right-content{
                width: 180px;
                cursor: pointer;
                .map{
                    width: 180px;
                    height: 156px;
                    padding: 18px 0 35.5px;
                    border-bottom: 1px solid #eeeeee;
                    cursor: pointer;
                    .pic{
                        margin: 21px 35px 0;
                        width: 110px;
                        height: 73px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -261px -124px;
                    }
                    .text{
                        margin-top: 26px;
                        height: 36px;
                        width: 180px;
                        text-align: center;
                        line-height: 36px;
                        background-color: #4285f4;
                        color: #fff;
                        font-size: 12px;
                    }
                }
                .hotQA{
                    padding: 35.5px 0;
                    border-bottom: 1px solid #eeeeee;
                    width: 180px;
                    // height: 334px;
                    h1{
                        color: #394043;
                        font-size: 16px;
                        font-weight: bold;
                    }
                    ul{
                        margin-top: 20px;
                        li{
                            margin: 12px 0;
                            .question{
                                white-space: pre-wrap;
                                font-size: 12px;
                                color: #394043;
                                line-height: 16px;
                                text-align: justify;
                                margin-bottom: 10px;
                            }
                            span{
                                display: inline-block;
                                font-size: 12px;
                                color: #ccd0d1;
                                white-space: pre-wrap;
                                &:nth-child(3){
                                    margin-left: 3px;
                                }
                            }
                        }

                    }
                }
            }
        }
    }
    .newHousePush{
        background-color: #f5f5f6;
        line-height: 1;
        h3{
            font-size: 24px;
            padding-top: 46px;
            font-weight: bold;
            color: #394043;
        }
        ul{
            display: flex;
            margin-top: 23px;
            padding-bottom: 46px;
            white-space: nowrap;
            overflow: hidden;
            li{
                width: 218px;
                height: 170px;
                margin-right: 10px;
                .image{
                    width: 218px;
                    height: 150px;
                    position: relative;
                    img{
                        width: 100%;
                    }
                    .description{
                        position: absolute;
                        top:0;
                        width: 100%;
                        text-align: center;
                        line-height: 150px;
                        color: #fff;
                        font-weight: 700;
                        text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
                        font-size: 14px;

                    }
                }
                .price{
                    padding-top: 8px;
                    font-size: 12px;
                    line-height: 1;
                    font-weight: 700;
                    i{
                        font-weight: 700;
                        color: #db4c3f;

                    }
                }
            }
        }
    }
}
</style>